"use client"
import React, { useState } from 'react';
import { Form, Input, Button, message } from 'antd';
import { useRouter } from 'next/navigation';
// import { cookies } from 'next/headers';

const { Item: FormItem } = Form;

function Login() {
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  const onFinish = async (values) => {
    setLoading(true);
    const { email, password } = values;
    try {
      const response = await fetch("http://127.0.0.1:8000/api/user/login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ email, password }),
      });

      const result = await response.json();
      // cookies().set("Authorization", result.token,{
      //   secure: true,
      //   httpOnly: true,
      //   // expires: new Date(Date.now() + 3600 * 1000 * 24 * 7), // 7 days
      //   expires: Date.now() + 24 * 60 * 60 * 7, // 7 days
      //   path: "/",
      //   sameSite: "strict",
      // })
      if (response.ok) {
        message.success("登录成功！");
        // 保存 token 到 cookie
        document.cookie = `token=${result.token}; path=/;`;
       // 保存 JWT 到 cookies
        localStorage.setItem("token", result.token); // 保存 JWT 到 localStorage
        console.log("token:", result.token);
        // 跳转到主页面
        router.push("/");
      } else {
        message.error(result.message || "登录失败，请重试");
      }
    } catch (error) {
      message.error("登录失败，请检查您的网络连接");
    } finally {
      setLoading(false);
    }
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <div style={{ maxWidth: 400, margin: "auto", padding: "20px" }}>
          <h1 style={{
        fontSize: '2.5em',
        color: '#333',
        textAlign: 'center',
        marginBottom: '20px',
        textShadow: '1px 1px 2px rgba(0, 0, 0, 0.1)'
      }}>欢迎登入</h1>
      <Form
        name="login"
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        initialValues={{ remember: true }}
        autoComplete="off"
      >
        <FormItem
          label="邮箱"
          name="email"
          rules={[
            { required: true, message: "请输入邮箱!" },
            { type: "email", message: "请输入有效的邮箱地址!" },
          ]}
        >
          <Input />
        </FormItem>
        <FormItem
          label="密码"
          name="password"
          rules={[{ required: true, message: "请输入密码!" }]}
        >
          <Input.Password />
        </FormItem>
        <FormItem>
          <Button type="primary" htmlType="submit" loading={loading} block>
            登录
          </Button>
        </FormItem>
      </Form>
      <Button type="link" onClick={() => router.push('/userregister')}>
        还没有账户？去注册
      </Button>
    </div>
  );
}

export default Login;

// "use client";
// import React, { useState } from 'react';
// import { Form, Input, Button, message } from 'antd';
// import { useRouter } from 'next/navigation';
// import { decode as jwt_decode } from 'jwt-decode'; // 使用命名导入

// const { Item: FormItem } = Form;

// function Login() {
//   const [loading, setLoading] = useState(false);
//   const router = useRouter();

//   const onFinish = async (values) => {
//     setLoading(true);
//     const { email, password } = values;
//     console.log("Starting login process..."); // 新增日志
//     try {
//       const response = await fetch("http://127.0.0.1:8000/api/user/login", {
//         method: "POST",
//         headers: {
//           "Content-Type": "application/json",
//         },
//         body: JSON.stringify({ email, password }),
//       });
//       console.log("Fetch completed, processing response..."); // 新增日志

//       const result = await response.json();
//       console.log("Response JSON parsed:", result); // 新增日志
//       if (response.ok) {
//         message.success("登录成功！");
//         console.log("token", result.token);
      
//         // 保存 token 到 cookie
//         document.cookie = `token=${result.token}; path=/;`;
//         console.log("token set in cookie:", result.token);
        
//         try {
//           // 解析并打印用户名
//           console.log("Attempting to decode token..."); // 新增日志
//           const decodedToken = jwt_decode(result.token);
//           console.log("Decoded token:", decodedToken);
//           if (decodedToken && decodedToken.username) {
//             console.log("username from token:", decodedToken.username);
//             // 你可以在这里将用户名保存到状态或执行其他操作
//           } else {
//             console.error("Username not found in token. Decoded token:", decodedToken);
//           }
//         } catch (decodeError) {
//           console.error("Token decoding failed:", decodeError);
//         }

//         // 跳转到主页面
//         router.push("/");
//       } else {
//         message.error(result.message || "登录失败，请重试");
//         console.error("Login failed:", result.message);
//       }
//     } catch (fetchError) {
//       message.error("登录失败，请检查您的网络连接");
//       console.error("Fetch error:", fetchError);
//     } finally {
//       setLoading(false);
//     }
//   };

//   const onFinishFailed = (errorInfo) => {
//     console.log("Form validation failed:", errorInfo);
//   };

//   return (
//     <div style={{ maxWidth: 400, margin: "auto", padding: "20px" }}>
//       <h1 style={{
//         fontSize: '2.5em',
//         color: '#333',
//         textAlign: 'center',
//         marginBottom: '20px',
//         textShadow: '1px 1px 2px rgba(0, 0, 0, 0.1)'
//       }}>欢迎登入</h1>
//       <Form
//         name="login"
//         onFinish={onFinish}
//         onFinishFailed={onFinishFailed}
//         initialValues={{ remember: true }}
//         autoComplete="off"
//       >
//         <FormItem
//           label="邮箱"
//           name="email"
//           rules={[
//             { required: true, message: "请输入邮箱!" },
//             { type: "email", message: "请输入有效的邮箱地址!" },
//           ]}
//         >
//           <Input />
//         </FormItem>
//         <FormItem
//           label="密码"
//           name="password"
//           rules={[{ required: true, message: "请输入密码!" }]}
//         >
//           <Input.Password />
//         </FormItem>
//         <FormItem>
//           <Button type="primary" htmlType="submit" loading={loading} block>
//             登录
//           </Button>
//         </FormItem>
//       </Form>
//       <Button type="link" onClick={() => router.push('/userregister')}>
//         还没有账户？去注册
//       </Button>
//     </div>
//   );
// }

// export default Login;








